import { DatePicker } from 'antd';
import { PickerProps } from 'antd/lib/date-picker/generatePicker';
import { useEffect, useState } from 'react';
import moment, { Moment } from 'moment';

export default function DatePickerWidget(props: PickerProps<string>) {
  const { value, onChange, ...res } = props;
  const [val, setVal] = useState<Moment>();

  useEffect(() => {
    if (value) {
      setVal(moment(value));
    }
  }, [value]);

  function handleChange(value: Moment, valueString: string) {
    onChange?.(value.format(res.format as string), valueString);
  }

  // @ts-ignore
  return <DatePicker {...res} value={val} onChange={handleChange} />;
}
